// 页面渲染
function renderHtml(dataName,data,eqName,collecTime,code,areaName,province){
    // var carouselBox = $('.carousel-main');
    var len = data.length;
    var str = '';
    var carouselBaseParams = {
        "温度": [basePath3 + "/environment/wendu.png", "#ff6262"],
        "湿度": [basePath3 + "/environment/shidu.png", "#3c81f1"],
        "露点": [basePath3 + "/environment/ludian.png", "#2edfe1"],
        "光照": [basePath3 + "/environment/guangzhaodu.png", "#f0631e"],
        "蒸发量": [basePath3 + "/environment/zhengfaliang.png", "#4caffc"],
        "风向": [basePath3 + "/environment/fengxiang.png", "#e96249"],
        "风速": [basePath3 + "/environment/fengsu.png", "#7c73f2"],
        "光合": [basePath3 + "/environment/gzfs.png", "#ffd051"],
        "雨量": [basePath3 + "/environment/jiangyuliang.png", "#00b4f7"],
        "气压": [basePath3 + "/environment/daqiya.png", "#b47df8"],
        "Co2": [basePath3 + "/environment/c02.png", "#47cafb"],
        "PM2.5": [basePath3 + "/environment/PM.png", "#fea356"],
        "氨气": [basePath3 + "/environment/anqi.png", "#41ecb8"],
        "紫外辐射": [basePath3 + "/environment/zwfs.png", "#daa4f4"],
        "总辐射": [basePath3 + "/environment/zongfushe.png", "#5ad3ae"],
        "雨雪": [basePath3 + "/environment/yuxue.png", "#30dfff"],
        "日照": [basePath3 + "/environment/rizhao.png", "#ff3f19"],
        "PH（玻璃电极）": [basePath3 + "/environment/PHqx.png", "#ffee2f"],
        "臭氧": [basePath3 + "/environment/qitaTQ.png", "#47cafb"],
        "PM10": [basePath3 + "/environment/qitaTQ.png", "#fea356"],
        "SO2": [basePath3 + "/environment/eyhl.png", "#41ecb8"],
        "NO2": [basePath3 + "/environment/qitaTQ.png", "#daa4f4"],
        "CO": [basePath3 + "/environment/qitaTQ.png", "#5ad3ae"],
        "噪音": [basePath3 + "/environment/qitaTQ.png", "#30dfff"],
        "负氧离子": [basePath3 + "/environment/qitaTQ.png", "#ff3f19"],
        "其他": [basePath3 + "/environment/qitaTQ.png", "#ff3091"],
    };
    var  dataNameLength=dataName.length;
    var carouselOptionParams = [];
   
   str += '<div class="card"  >';
   str += '<div class="card-body">';
   str += '<h4 class="card-title">'+eqName +'</h4>';
   str += '<h6 class="card-subtitle">区域名称：'+areaName +'； 设备名称：'+eqName +'； 设备编号：'+ code +'; 采集时间：'+ collecTime  +'</h6>';
   str += '<div class="contacts row" >';

    if (dataNameLength <= 1){
         str += '<div  style="width: 100%;text-align: center;">暂未获取到数据</div>';
    }


    $.each(carouselBaseParams, function(i,j){
        $.each(dataName, function(m,n){
            if(n.indexOf(i) !== -1){
                var initial = data[n];
                var  direction="";
                if(n == "风向"){
                    direction=windDirection(initial);
                }else{
                    direction= initial;
                }
                carouselOptionParams.push(n);

                     str += '<div class="col-xl-2 col-lg-3 col-sm-4 col-6" >';
                     str += '<div class="contacts__item">';
                     str += '<a href="javacript:void(0);" class="contacts__img">';
                     
                     str += '<img src="'+ j[0] +'" alt="">';
                     str += '</a>';
                     str += ' <div class="contacts__info">';
                     str += '<strong>'+ direction +'</strong>';
                     str += '<small>'+ n +'</small>';
                     str += '</div></div></div>';
//                   str += '</div></div></div>';
                     
                     
//                  str += '<li class="" style="margin-top: 15px;margin-right: 28px;height: 80px;"><div class="carousel-img"><img src="'+ j[0] +'" alt="" height="80" width="80">';
//                  str += '</div><p class="carousel-unit-name" style="text-align: center;">';
//                  str += '<span>'+ n +'</span></p><p class="carousel-unit-name" style="text-align: center;font-size: 18px;color:#65C4BB;"><span>'+ direction +'</span></p></li>';
//             
                
//              else  if (dataNameLength >13) {
//                  str += '<li class="" style="margin-right: 28px;height: 80px;float: left;"><div class="carousel-img"><img src="'+ j[0] +'" alt="" height="50" width="80">';
//                  str += '</div><p class="carousel-unit-name" style="text-align: center;">';
//                  str += '<span>'+ n +'</span></p><p class="carousel-unit-name" style="text-align: center;font-size: 18px;color:#65C4BB;"><span >'+ direction +'</span></p></li>';
//              }
            }
        });
    });

    if(carouselOptionParams.length > 0){
        var differArr = dataName.diff(carouselOptionParams);
        var differArrLen = differArr.length;
        for(var i = 0;i<differArrLen;i++){
            var initial = data[ differArr[i] ];
             str += '<div class="col-xl-2 col-lg-3 col-sm-4 col-6" >';
                     str += '<div class="contacts__item">';
                     str += '<a href="javacript:void(0);" class="contacts__img">';
                     
                     str += '<img src="'+basePath3+'/environment/qitaTQ.png'+'" alt="">';
                     str += '</a>';
                     str += ' <div class="contacts__info">';
                     str += '<strong>'+ initial +'</strong>';
                     str += '<small>'+ differArr[i] +'</small>';
                     str += '</div></div></div>';
                     
            
//          if (dataNameLength == 13){//奇数行（页面渲染时加入边框）
//              str += '<li class=""style="margin-top: 15px;margin-right: 28px;height: 80px;"><div class="carousel-img"><img src="'+basePath3+'/environment/qitaTQ.png" alt="" height="80" width="80">';
//              str += '</div><p class="carousel-unit-name" style="text-align: center;" >';
//              str += '<span>'+ differArr[i] +'</span></p><p class="carousel-unit-name" style="text-align: center;font-size: 18px;font-size: 18px;color:#65C4BB;"><span>'+ initial +'</span></p></li>';
//          }else if (dataNameLength > 13){
//              str += '<li class=""style="margin-right: 28px;height: 80px;float: left;"><div class="carousel-img"><img src="'+basePath3+'/environment/qitaTQ.png" alt="" height="50" width="80">';
//              str += '</div><p class="carousel-unit-name" style="text-align: center;" >';
//              str += '<span>'+ differArr[i] +'</span></p><p class="carousel-unit-name" style="text-align: center;font-size: 18px;color:#65C4BB;"><span>'+ initial +'</span></p></li>';
//          }

        }
    }
str += '</div></div></div>';
    $("#tianQi_list").append(str);
}


// 数组的差
Array.prototype.diff = function(a) {
    return this.filter(function(i) {return a.indexOf(i) < 0;});
};

//风向转换
function windDirection(initial){
    var value = "北风";
    if ((initial >=337.5 && initial<360)||(initial >=0 && initial<22.5))
        value = "北风" ;
    if (initial >=22.5 && initial<67.5)
        value = "东北风" ;
    if (initial >=67.5 && initial<112.5)
        value = "东风" ;
    if (initial >=112.5 && initial<157.5)
        value = "东南风" ;
    if (initial >=157.5 && initial<202.5)
        value = "南风" ;
    if (initial >=202.5 && initial<247.5)
        value = "西南风" ;
    if (initial >=247.5 && initial<292.5)
        value = "西风" ;
    if (initial >=292.5 && initial<337.5)
        value = "西北风" ;
    return value;
}